
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
*{
	margin:0;
	padding:0;
}
body{font-size:12px;}
/*不带文字*/
.progress{
	border:0;
	width: 152px; 
	height: 18px; 
	background:url(http://www.cssrain.cn/demo/makeProgress/img/progress.gif) no-repeat -100px 50%;
}
/*带文字显示*/
.progressbar_3{
	width:152px;
	position:relative;
	height:18px;
	text-align:center;
	position:relative;
	color:#222;
}
.progressbar_3 .text{
	width:152px;
	position:absolute;
	left:0;
	top:0;
	height:18px;
	line-height:18px;
	z-index:100;
}
.progressbar_3 .progress{
	width:152px;
	position:absolute;
	left:0;
	top:0;
	height:18px;
	z-index:10;
}
</style>
<script language="javascript">
var PicAr=[['http://www.cssrain.cn/images/bg.jpg','背景'],
['http://www.cssrain.cn/images/c1.png','卡片'],
['http://www.cssrain.cn/images/c2.png','卡片'],
['http://www.cssrain.cn/images/c3.png','卡片'],
['http://www.cssrain.cn/images/c4.png','卡片'],
['http://www.cssrain.cn/images/c5.png','卡片'],
['http://www.cssrain.cn/images/c6.png','卡片'],
['http://www.cssrain.cn/images/c7.png','卡片'],
['http://www.cssrain.cn/images/c8.png','卡片'],
['http://www.cssrain.cn/images/sephira_software.png','卡片栏'],
['http://www.cssrain.cn/images/tragic_phantom.png','剪草机'],
['http://www.cssrain.cn/images/yahoo.gif','游戏LOGO界面'],
['http://www.cssrain.cn/images/Control/Pic2.jpg','简介背景'],
['http://www.cssrain.cn/demo/24_pages/image1.gif','image1'],
['http://www.cssrain.cn/demo/24_pages/image2.gif','image2'],
['http://www.cssrain.cn/demo/24_pages/meneame.jpg','简介背景'],
['http://www.cssrain.cn/demo/24_pages/25css.jpg','简介背景']
];


var LoadAccessNum=0; //载入成功的图片数量

function $(id){
	return(document.getElementById(id));
}

/*--------以下是载入图片进度条--------*/
var Browser=new Object(); 
Browser.userAgent=window.navigator.userAgent.toLowerCase(); 
Browser.ie=/msie/.test(Browser.userAgent); 
Browser.Moz=/gecko/.test(Browser.userAgent); 

function LevelLoadProgress(){
	var PicNum=PicAr.length;
	$('text').innerHTML='正在准备载入游戏素材...';
	$("progress").style.backgroundPosition= "-150px 50%";
	for(n=0;n<=PicNum-1;n++){
		Imagess(n,PicAr[n][0],"img"+n,checkimg); 
	}
}

function Imagess(n,url,imgid,callback){    
    var val=url; 
    var img=new Image(); 
    if(Browser.ie){ 
        img.onreadystatechange =function(){  
            if(img.readyState=="complete"||img.readyState=="loaded"){ 
                callback(img,imgid,n); 
            } 
        }        
    }else if(Browser.Moz){ 
        img.onload=function(){ 
            if(img.complete==true){ 
                callback(img,imgid,n); 
            } 
        }        
    }    
    //如果因为网络或图片的原因发生异常，则显示该图片 
    img.onerror=function(){img.src=val;img.onreadystatechange=null;} 
    img.src=val; 
} 

//检测图片加载
function checkimg(obj,imgid,n){
	LoadAccessNum+=1;
	var PicNum=PicAr.length,ReduceX=150/PicNum,imgFlagHeadLeft=139-LoadAccessNum*ReduceX;
	$('text').innerHTML='载入:'+PicAr[n][1]+'('+LoadAccessNum+'/'+PicNum+')';
	var a = parseInt(LoadAccessNum*ReduceX) ;
	$("progress").style.backgroundPosition= (a-150)+"px 50%";
	window.status=LoadAccessNum;
	if(LoadAccessNum==PicNum){
		$('dFlagMeter').style.display='none';
		LoadAccess();
		return false
	}
}
/*--------以上是载入图片进度条--------*/

//调用载入图片进度条LevelLoadProgress(),载入成功后执行LoadAccess();
function LoadAccess(){
	$('dFlagMeter2').style.display='block';
}

</script>
</head>
<body onload="document.execCommand('BackgroundImageCache',false,true);LoadAccess();">

<div style="position: absolute; z-index: 255; left: 260px; top: 150px;" id="dFlagMeter">
	<table width="500" height="40" cellspacing="0" cellpadding="0" bordercolor="#000000" border="0">
		<tbody><tr>
			<td width="343" valign="top">
					<div class="progressbar_3"> 
						<div id="text" class="text">正在准备载入游戏素材...</div> 
						<img  id="progress" class="progress" width="152" height="18" title="100%" alt="100%" src="http://www.cssrain.cn/demo/makeProgress/img/bg.gif" style="background-position: -150px 50%;"/> 
					</div> 
			 </td>
		</tr>
	</tbody>
	</table>
</div>

<div style="display:none;position: absolute; z-index: 254; left: 260px; top: 150px;" id="dFlagMeter2">载入成功!</div>
 

<script type="text/javascript">
LevelLoadProgress();
</script>
</body>
</html>

